<template>
    <header>
        <div class="search-bar" v-enter-to-next :class="{ open_bar: open }">
            <el-form :inline="true" @submit.native.prevent>
                <el-row type="flex" class="row" justify="end"
                        v-show="(toolbar_filter && arrow) || open">
                    <el-col :span="24">
                        <el-form-item v-for="(item, key) in toolbar_filter" :key="key"
                                      :label="item.label" label-width="100px" :prop="item.type"
                                      :class="getFormItemClass(item, key)">
                            <el-input v-model="item.value" autocomplete="off" clearable
                                      :placeholder="item.placeholder" :ref="`search_item_${key}`"
                                      v-if="item.type === 'text' || !item.type" />
                            <el-input v-model.number="item.value" autocomplete="off"
                                      :placeholder="item.placeholder" :ref="`search_item_${key}`"
                                      v-else-if="item.type === 'number'" clearable />
                            <el-checkbox v-else-if="item.type === 'checkbox'" :ref="`search_item_${key}`"
                                         v-model="item.value" :true-label="item.trueLabel"
                                         :false-label="item.falseLabel" />
                            <el-date-picker v-model="item.value" :type="item.type"
                                            :placeholder="item.placeholder" :ref="`search_item_${key}`"
                                            :value-format="item.valueformat || 'yyyy-MM-dd'"
                                            :popper-class="`date_popper_${key}`"
                                            v-else-if="item.type === 'time' || item.type === 'date' || item.type === 'datetime'"
                                            clearable />
                            <el-date-picker v-model="item.value" :type="item.type"
                                            :placeholder="item.placeholder" :ref="`search_item_${key}`"
                                            :range-separator="item.rangeSeparator"
                                            :start-placeholder="item.startPlaceholder"
                                            :end-placeholder="item.endPlaceholder"
                                            :value-format="item.valueformat || 'yyyy-MM-dd'"
                                            v-else-if="item.type === 'daterange'"
                                            :popper-class="`date_popper_${key}`"
                                            :style="item.style"
                                            clearable />
                            <el-select v-model="item.value" default-first-option :ref="`search_item_${key}`"
                                       :placeholder="item.placeholder" v-else-if="item.type === 'select'"
                                       :prop="item.props" clearable filterable
                                       :popper-class="`select_popper_${key}`">
                                <el-option v-for="(item, index) in item.options" :key="index"
                                           :label="item.label" :value="item.value" />
                            </el-select>
                            <el-cascader v-else-if="item.type === 'cascader'" :ref="`search_item_${key}`"
                                         v-model="item.value" :options="item.options"
                                         :props="item.props" clearable />
                            <el-cascader v-else-if="item.type === 'cascader'" :ref="`search_item_${key}`"
                                         v-model="item.value" :options="item.options"
                                         :props="item.props" clearable />
                            <v-select-bottom v-else-if="item.type === 'selectBottom' && item.props"
                                             :ref="`search_item_${key}`"
                                             v-model="item.value" :type="item.props.type"
                                             :options="item.props.options"
                                             :tree-options="item.props.treeOptions" />
                            <remote-select v-else-if="item.type === 'remoteSelect' && item.props"
                                           :ref="`search_item_${key}`"
                                           v-model="item.value" :options="item.props" />
                        </el-form-item>
                        <div class="flex-end my-button" v-if="!open">
                            <el-button class="mr5" @click="search">提交</el-button>
                            <el-button @click="reset">重置</el-button>
                        </div>
                        <div class="blank-b" v-if="!open"></div>
                    </el-col>
                </el-row>
                <template v-if="line">
                    <el-row>
                        <el-col :span="24">
                            <slot name="toolbar_buttons">
                                <div style="display: flex;align-items: center;justify-content: flex-start;" v-if="showToolbar">
                                    <!-- 工具栏 -->
                                    <vButtons :data="toolbar_buttons"></vButtons>
                                    <slot name="left_search"></slot>
                                </div>
                            </slot>
                        </el-col>
                        <el-col :span="24">
                            <slot name="toolbar_search">
                                <div class="search-comps-col my-button" v-if="isSearch">
                                    <slot name="right_search" class="right_search"></slot>
                                    <vxe-toolbar ref="vxeToolbar" size="mini" :custom="showCustom">
                                        <template slot="tools">
                                            <el-input ref="search_value" v-model="searchForm.search_value"
                                                      autocomplete="off" placeholder="模糊搜索" :title="title"
                                                      class="w200 base_header_search_input" clearable @change="changeSearch"
                                                      @keyup.enter.native="search" />
                                            <el-button icon="el-icon-search" @click="search" />
                                            <el-button v-if="toolbar_filter && toolbar_filter.length && !open"
                                                       :icon="'fa fa-exchange rotate'" @click="arrowClick" />
                                            <el-button class="p9" icon="fa fa-refresh" v-if="isReset"
                                                       @click="reset" />
                                        </template>
                                    </vxe-toolbar>
                                </div>
                            </slot>
                        </el-col>
                    </el-row>
                </template>
                <template v-else>
                    <el-row type="flex" class="row" :justify="justify">
                        <slot name="toolbar_buttons">
                            <div style="display: flex;align-items: center;justify-content: flex-start;" v-if="showToolbar">
                                <!-- 工具栏 -->
                                <vButtons :data="toolbar_buttons"></vButtons>
                                <slot name="left_search"></slot>
                            </div>
                        </slot>
                        <slot name="toolbar_search">
                            <div class="search-comps-col my-button" v-if="isSearch">
                                <slot name="right_search" class="right_search"></slot>
                                <vxe-toolbar ref="vxeToolbar" size="mini" :custom="showCustom">
                                    <template slot="tools">
                                        <el-input ref="search_value" v-if="isSearchInput"
                                                  v-model="searchForm.search_value"
                                                  autocomplete="off" placeholder="模糊搜索" :title="title"
                                                  class="w100 base_header_search_input" clearable @change="changeSearch"
                                                  @keyup.enter.native="search" />
                                        <el-button class="header_btn" v-if="isSearchBtn" icon="el-icon-search"
                                                   @click="search" />
                                        <el-button class="header_btn" v-if="toolbar_filter && toolbar_filter.length && !open"
                                                   :icon="'fa fa-exchange rotate'" @click="arrowClick" />
                                        <el-button class="header_btn p9" icon="fa fa-refresh" v-if="isReset"
                                                   @click="reset" />
                                    </template>
                                </vxe-toolbar>
                                <slot name="right_btn" class="right_search"></slot>
                            </div>
                        </slot>
                    </el-row>
                </template>
            </el-form>
        </div>
    </header>
</template>
<script>
import inject from "@common/mixins/inject";

export default {
    extends: inject,
    name: "BaseHeader",
    props: {
        tableRef: {
            type: String,
            default: null,
        },
        toolbar_buttons: {
            //操作按钮组
            type: Array,
            default() {
                return [];
            },
        },
        toolbar_filter: {
            //精确筛选
            type: Array,
            default() {
                return [];
            },
        },
        isSearch: {
            //是否显示搜索框
            type: Boolean,
            default() {
                return true;
            },
        },
        isSearchInput: {
            //是否显示搜索框input
            type: Boolean,
            default() {
                return true;
            },
        },
        isSearchBtn: {
            //是否显示搜索button
            type: Boolean,
            default() {
                return true;
            },
        },
        justify: {
            type: String,
            default() {
                return "space-between";
            },
        },
        searchForm: {
            type: Object,
            default() {
                return {};
            },
        },
        open: {
            type: Boolean,
            default() {
                return false;
            },
        },
        isReset: {
            type: Boolean,
            default() {
                return true;
            },
        },
        line: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '模糊搜索',
        },
    },
    data() {
        return {
            bakForm: { ...this.searchForm },
            arrow: false, //筛选栏展开收缩标识
        };
    },
    computed: {
        showToolbar() {
            return this.toolbar_buttons && this.toolbar_buttons.length;
        },
        showCustom() {
            return typeof this.getParentRef === 'function' && this.$utils.isNotEmpty(this.tableRef);
        },
    },
    watch: {
        tableRef() {
            this.connect();
        },
        searchForm() {
            this.int();
        },
    },
    mounted() {
        this.int();
    },
    methods: {
        getFormItemClass(item, index) {
            let classes = [ 'enter_to_next' ];
            classes.push(`index_${ index }`);
            if (item.type === 'checkbox') {
                classes.push('search_checkbox');
            }
            return classes;
        },
        async int() {
            for (let i = 0; i < this.toolbar_filter.length; i++) {
                let field = [];
                field = this.toolbar_filter[i];
                this.$set(field, "value", (this.searchForm[field.field] || ''));
                if (field.type === "select" && field.datasource) {
                    const res = await this.$axios(field.datasource);
                    if (res.data.data) {
                        field.options = res.data.data.map((it) => {
                            it.value = String(it.value);
                            return it;
                        });
                    } else {
                        field.options = [];
                    }
                }
            }
            this.$nextTick(() => this.connect());
        },
        connect() {
            if (!this.showCustom) {
                return;
            }
            let parentRef = this.getParentRef();
            if (!parentRef) {
                return;
            }
            if (parentRef[this.tableRef] && this.$refs.vxeToolbar) {
                parentRef[this.tableRef].connect(this.$refs.vxeToolbar);
            }
        },
        // 重置筛选栏
        reset() {
            let $this = this;
            let searchForm = {
                search_value: '',
                searchValue: '',
            };
            let $parent = $this.dispatch('el-container')
            $this.searchForm.state = ""
            Object.assign(this.searchForm, this.bakForm)
            $this.toolbar_filter.forEach((item) => {
                item["value"] = "";
                searchForm[item.field] = "";
            });
            $this.$emit("event", {
                type: "refresh",
                searchForm,
            });
        },
        // 筛选栏展开事件
        arrowClick() {
            this.arrow = !this.arrow;
            this.$emit('arrow');
        },
        // 搜索事件，传递搜索条件
        search() {
            let searchForm = {};
            //模糊搜索
            searchForm.search_value = this.searchForm.search_value;
            searchForm.searchValue = this.searchForm.search_value;
            if (this.arrow || this.open) {
                //隐藏的过滤
                this.toolbar_filter.forEach((item) => {
                    searchForm[item.field] = item.value;
                });
            }
            console.log('search', searchForm);
            this.$emit("event", {
                type: "search",
                searchForm,
            });
        },
        changeSearch(val) {
            if (!this.$utils.isNotEmpty(val)) {
                this.$emit("event", {
                    type: "search",
                    searchForm: {
                        search_value: '',
                        searchValue: '',
                    },
                });
            }
        },
    },
};
</script>

<style scoped>
.search-m {
    margin: 5px 0 5px 0;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}

.search_checkbox >>> .el-form-item__content {
    width: 200px;
}

/* 搜索栏样式 */
.search-bar .el-form .search-comps-col {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0 5px;
}

.search-bar .el-form .search-comps-col div, button, .right_search {
    margin: 5px 5px 5px 0;
    text-align: right;
}

.search-bar .el-form .el-form-item .el-input,
.search-bar .el-form .el-form-item .el-select {
    width: 200px;
}

.search-bar >>> .el-range__icon {
    line-height: 16px;
}

.search-bar >>> .el-range-separator {
    line-height: 16px;
    min-width: 2em;
}

.search-bar >>> .el-range__close-icon {
    line-height: 16px;
}
</style>
<style>
.search-bar .item + .item {
    margin-left: 0 !important;
}

.search-bar .el-form .search-comps-col .header_btn,
.search-bar .el-form .search-comps-col div {
    margin: 0 !important;
}

.el-select__tags .el-select__input {
    margin-left: 5px;
}

.search-bar .el-form .search-comps-col .vxe-toolbar {
    padding: 0;
}

.search-bar .el-form .search-comps-col .vxe-toolbar .vxe-tools--wrapper {
    gap: 0 5px;
}

.search-bar .el-form .search-comps-col .vxe-toolbar .vxe-tools--wrapper .el-button {
    margin: 0;
}

.search-bar .el-form .search-comps-col .vxe-toolbar .vxe-tools--operate {
    margin-left: 5px !important;
}

.search-bar .el-form .search-comps-col .vxe-toolbar .vxe-tools--operate .vxe-button {
    padding: 5px;
    min-width: 24px;
    height: 24px;
    border-radius: 3px;
}
</style>
